<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{component/_layout :: layout(~{::title},~{::headTitle}, ~{::section},~{::link},~{::script})}">
<head>
    <meta charset="UTF-8">
    <title>巡查检查系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/css/elementUI.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo.css}">
</head>
<body>
<!--自定义头部标题-->
<headTitle>
    <h2 class="headTitle">计划巡查列表</h2>
</headTitle>
<!--自定义的主页样式-->
<section>
    <div id="app">
        <!--展示用户表格-->
        <el-table :data="items" height="525" style="width: 100%" :row-class-name="tableRowClassName">

            <el-table-column prop="createdTime" label="创建时间" width="180"></el-table-column>
            <el-table-column prop="year" label="年度" width="180"></el-table-column>
            <el-table-column prop="createdBy" label="创建人员"></el-table-column>
            <el-table-column prop="createdTime" label="创建时间" width="180"></el-table-column>
            <el-table-column prop="checkedName" label="审核人员" width="180"></el-table-column>
            <el-table-column label="状态" width="180">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.fchecked === '0'" type="warning">未审核</el-tag>
                    <el-tag v-if="scope.row.fchecked === '1'" type="success">审核</el-tag>
                </template>
            </el-table-column>
            <el-table-column width="180" align="right">
                <template slot="header" slot-scope="scope">
                    <el-input size="mini" @change="queryMcPlan0" :value="year"
                              placeholder="请输入年份查询"/>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="mcPlan0Checked(items[scope.$index].id)" v-if="scope.row.fchecked === '0'">审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--分页插件-->
        <el-pagination class="pageModel"
                       background
                       layout="prev, pager, next"
                       :current-page="index"
                       @current-change="updatePage"
                       :page-size="page"
                       :total="total">
        </el-pagination>
    </div>
</section>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                //用户查询的年度
                year: '',
                //当前页数
                index: 1,
                //每页显示多少条数据
                page: 7,
                //总共多少条数据
                total: 0,
                //获取到用户的信息
                items: [],
                //单个对象
                item: {
                    checkedLead: "",
                    checkedName: "",
                    createdBy: "",
                    fchecked: "",
                    year: ""
                },
                mcPlan1: {
                    index: 1,
                    page: 7
                }
            }
        },
        //加载事件
        created() {
            this.initMcPlan0(this.index, this.page, this.year);
        },
        //函数集群
        methods: {
            //查询用户
            initMcPlan0(index, page, year) {
                axios.get(`/yyds/machine_system/mc-plan0/list/${index}/${page}?year=${year}`).then(resp => {
                    console.log(resp.data);
                    this.items = resp.data.map.items;
                    this.total = resp.data.map.total;
                })
            },
            //隔行换色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return 'warning-row';
                } else if (rowIndex % 2 === 1) {
                    return 'success-row';
                }
                return '';
            },
            //修改用户时的查询
            mcPlan0Edit(id) {
                this.centerDialogVisible = true;
                this.delId = id;
                axios.post(`/yyds/machine_system/mc-plan0/get/${id}`).then(resp => {
                    this.item = resp.data.map.item;
                })
            },
            //删除用户
            mcPlan0Delete(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete(`/yyds/machine_system/mc-plan0/delete/${id}`).then(resp => {
                        this.dialogVisible = false;
                        this.initMcPlan0(this.index, this.page, this.year)
                        this.$message({
                            type: resp.data.code === '1' ? 'success' : 'error',
                            message: resp.data.message
                        })
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //模糊查询
            queryMcPlan0() {
                this.initMcPlan0(this.index, this.page, this.year)
            },
            //分页时
            updatePage(val) {
                this.initMcPlan0(this.index, this.page, this.year)
            },
            //修改信息
            updateMcPlan0() {
                axios.post({
                    url: `machine_system/mc-plan0/update`,
                    data: this.item
                }).then(resp => {
                    const data = resp.data;
                    if (data.code === 1) {
                        this.initMcPlan0(this.index, this.page, this.year)
                    }
                    this.$message({
                        type: resp.data.code === 1 ? 'success' : 'error',
                        message: resp.data.map.message
                    })
                })

            },
            mcPlan0Checked(id){
                this.$confirm('确定审核?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.post(`/yyds/machine_system/mc-plan0/checkPlan/${id}`).then(resp=>{
                        console.log("************")
                        console.log(resp.data);
                        this.$message({
                            message: '审核成功',
                            type: 'success'
                        });
                        this.initMcPlan0(this.index, this.page, this.year);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消审核'
                    });
                });


            }
        }
    })
</script>
</body>
</html>